<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const vueOption = {
        // data: {
        //   aa: 11,
        // },
        // 写成函数内部返回新对象，组件的data数据互不影响
        data() {
          return {
            aa: 11,
          }
        },
      }

      function VueComponent(options) {
        // this.data = options.data
        this.data = options.data()
      }

      const v1 = new VueComponent(vueOption)
      const v2 = new VueComponent(vueOption)
      console.log(v1)
      console.log(v2)

      // console.log(v1 === v2) // 两个组件

      console.log(v1.data === v2.data)
      v1.data.aa = 22
    </script>
  </body>
</html>
